/*
 * @Author: wangdengduo
 * @Date: 2023-05-10 09:42:56
 * @LastEditors: wangdengduo
 * @LastEditTime: 2023-05-10 10:40:32
 * @FilePath: \todo\src\components\siderNav\index.js
 * @Description: 
 */
import { Menu } from "antd";
import { CheckOutlined, HomeOutlined } from '@ant-design/icons';
import './index.css'
import { useNavigate, useLocation } from 'react-router';
import { useEffect } from 'react';

const items = [
  {
    label: '全部',
    key: '/todo',
    icon: <HomeOutlined />,
  },
  {
    label: '已完成',
    key: '/done',
    icon: <CheckOutlined />,
  },
]

const SiderNav = () => {
  const navigate = useNavigate()
  const location = useLocation()

  const onClick = (e) => {
    navigate(e.key, { replace: true })
  }

  useEffect(() => {
    const {pathname} = location
    if(pathname === '/'){
      navigate('/todo', { replace: true })
    }
}, [location.pathname])

  return (
    <Menu
      mode="inline"
      items={items}
      defaultSelectedKeys={['/todo']}
      onClick={onClick}
      className="menu-content"
    />
  );
};

export default SiderNav;
